<template>
	<!-- 鉴定详情 -->
	<view class="page">
		<c-navBar title="鉴定详情" isPerch share @share="show=true"></c-navBar>
		<view class="bg"></view>
		<view class="pd24">
			<view class="main">
				<view class="top">
					<view class="top_l">
						<image class="inCheck" src="/static/common/inCheck.png" mode=""></image>
						<view class="info">
							<view class="text1">专业鉴定</view>
							<view class="text2">鉴定编号：{{FormData.number}}</view>
							<view class="text2">鉴定时间：{{$fn.parseTime(FormData.authenticationTime)}}</view>
						</view>
					</view>
					<view class="top_r">
						<view v-if="FormData.itemType === 1" style="font-size: 10px;">球鞋鉴定</view>
						<view v-else-if="FormData.itemType === 2" style="font-size: 10px;">奢潮鉴定</view>
						<view class="status" v-if="FormData.authenticationResult==3">待补图</view>
						<view class="status" v-else-if="FormData.authenticationResult==2">无法判断</view>
						<image class="asTrue" v-else-if="FormData.authenticationResult==0"
							src="/static/tabbar/asTrue.png" mode=""></image>
						<image class="asTrue" v-else-if="FormData.authenticationResult==1"
							src="/static/tabbar/asFalse.png" mode=""></image>
					</view>
				</view>

				<view class="result">鉴定结果：
					<view v-if="FormData.authenticationResult === 0">鉴定为真</view>
					<view v-else-if="FormData.authenticationResult === 1">鉴定为假</view>
					<view v-else-if="FormData.authenticationResult === 2">无法判断</view>
					<view v-else-if="FormData.authenticationResult === 3">待补图</view>
				</view>

				<view class="cause">鉴定原因：
					<text class="causetext">{{FormData.authenticationReasons}}</text>
				</view>

				<view class="imgs">
					<u-swiper :list="list3" imgMode="scaleToFill" indicator indicatorMode="dot" height="654rpx" circular
						interval="4000" @click="enlarge"></u-swiper>
				</view>
			</view>

			<view class="evaluate">
				<!-- 遍历 list5 数组来展示每个评论 -->
				<view v-for="(comment, index) in list5" :key="index" class="comment-block">
					<view class="title">
						<text class="user">用户评价</text>
						<text class="date">{{$fn.parseTime(comment.createTime) }}</text> <!-- 假设每个评论对象有一个日期属性 -->
					</view>
					<view class="content">
						{{ comment.content }}
					</view>
					<!-- 如果评论中有图片，也可以遍历展示 -->
					<view class="imgs">
						<image v-for="(image, imgIndex) in JSON.parse(comment.image)" :key="imgIndex" class="img"
							:src="vuex_imgUrl+image" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="show" :round="10" mode="bottom">
			<view class="share_btns">
				<view class="share_item" v-for="(item,index) in shareList" :key="index" @click="shareApp(item)">
					<image class="icon" :src="item.icon" mode=""></image>
					<text class="share_t">{{item.title}}</text>
				</view>
			</view>
			<view class="cancel" @click="show=false">取消</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "identDetail",
		data() {
			return {
				FormData: {},
				show: false,
				list3: [],
				list4: [],
				list5: [],
				shareList: [{
					icon: '/static/common/vx_friends.png',
					title: '微信好友'
				}, {
					icon: '/static/common/vx_moments.png',
					title: '微信朋友圈'
				}, {
					icon: '/static/common/connection.png',
					title: '复制链接'
				}]
			};
		},
		onLoad(options) {
			console.log(options.param, "订单编号") // 将参数赋值给data中的param变量
			this.getOrderByNumber(options.param)
		},
		onShow() {},
		methods: {
			getOrderByNumber(number) {
				this.$api.getOrderByNumber({
					number: number
				}).then(res => {
					console.log(res, '订单信息');
					this.FormData = res.data;
					this.list4 = JSON.parse(res.data.itemImage);

					// 确保 list3 是一个数组
					this.list3 = this.list4.map(imageUrl => this.vuex_imgUrl + imageUrl);

					this.list5 = res.data.commentsList

					console.log(this.list5)
				})
			},
			// 放大图片
			enlarge(i) {
				console.log('点击了图片', i);
				uni.previewImage({
					urls: this.list3,
					current: i
				})
			},
			shareApp(v) {
				console.log('分享app', v.title);
				if (v.title == '复制链接') {
					uni.setClipboardData({
						data: 'https://uniapp.dcloud.io',
						success: function() {
							uni.showToast({
								icon: 'none',
								title: '复制链接成功'
							})

						}
					});
				} else {
					uni.shareWithSystem({
						summary: 'InCheck鉴定',
						imageUrl:'/static/common/inCheck.png',
						href: 'https://uniapp.dcloud.io',
						success() {
							// 分享完成，请注意此时不一定是成功分享
						},
						fail() {
							// 分享失败
						}
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
	}

	.navbar {
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.share {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.bg {
		width: 750rpx;
		height: 600rpx;
		background: linear-gradient(180deg, rgba(1, 255, 204, 0.5) 0%, rgba(1, 255, 204, 0) 100%);
		position: absolute;

	}

	.pd24 {
		padding: 24rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;

		.main {
			padding: 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 8rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 8rpx 0 32rpx;
				border-bottom: 1rpx solid #979999;


				.top_l {
					display: flex;
					align-items: center;
					gap: 24rpx;

					.inCheck {
						width: 128rpx;
						height: 128rpx;
					}

					.info {
						height: 128rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.text1 {
							font-weight: bold;
							font-size: 32rpx;
							color: #1A1A1A;
						}

						.text2 {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}

					}
				}

				.top_r {
					height: 128rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;

					.sneakers {
						font-size: 24rpx;
						color: #01AF21;
					}

					.status {
						width: 56rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #F53100;
						line-height: 36rpx;
					}

					.asTrue {
						width: 72rpx;
						height: 72rpx;
					}
				}

			}

			.result {
				padding: 32rpx 0;
				border-bottom: 1rpx solid #979999;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;

				.concede {
					font-weight: 400;
					color: #666666;
				}

			}

			.cause {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				padding: 32rpx 0;

				.causetext {
					font-weight: 400;
					color: #666666;
				}

			}

			.picture {
				width: 100%;
				border-radius: 8rpx;
			}

		}

	}

	.evaluate {
		margin-top: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 8rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.user {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.date {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

		}

		.content {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin: 20rpx 0;
		}

		.imgs {
			display: flex;
			align-items: center;
			gap: 16rpx;
			flex-wrap: wrap;

			.img {
				width: 152rpx;
				height: 152rpx;
				border-radius: 8rpx;
			}
		}

	}

	.share_btns {
		padding: 80rpx 72rpx 60rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.share_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;

			.icon {
				width: 96rpx;
				height: 96rpx;
			}

			.share_t {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

		}
	}

	.cancel {
		padding: 38rpx 0 68rpx;
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
	}
</style>